<section class="page login-page" nz-row  [nzType]="'flex'" nzAlign="middle"	nzJustify="center">
  <canvas class="background"></canvas>
  <form nz-form [formGroup]="loginForm" class="login-form" (ngSubmit)="submitForm()">
    <div nz-form-item>
      <div nz-form-control [nzValidateStatus]="loginForm.controls.username">
        <nz-input formControlName="username" [nzPlaceHolder]="'请输入用户名'" [nzSize]="'large'">
          <ng-template #prefix>
            <i class="anticon anticon-user"></i>
          </ng-template>
        </nz-input>
        <div nz-form-explain *ngIf="loginForm.controls.username.dirty&&loginForm.controls.username.hasError('required')">请输入用户名!</div>
      </div>
    </div>
    <div nz-form-item>
      <div nz-form-control [nzValidateStatus]="loginForm.controls.password">
        <nz-input formControlName="password" [nzType]="'password'" [nzPlaceHolder]="'请输入密码'" [nzSize]="'large'">
          <ng-template #prefix>
            <i class="anticon anticon-lock"></i>
          </ng-template>
        </nz-input>
        <div nz-form-explain *ngIf="loginForm.controls.password.dirty&&loginForm.controls.password.hasError('required')">请输入密码!</div>
      </div>
    </div>
    <div nz-form-item class="login-action">
      <button nz-button class="login-form-button" [nzType]="'primary'" [nzSize]="'large'">登 录</button>
    </div>
  </form>
</section>
